<script setup>
import {artGetChannelsService,artDeleteChannelsService} from '@/api/article.js'
import {ref} from 'vue'
import {Edit,Delete} from '@element-plus/icons-vue'
// import {open} from '@/views/article/components/ChannelEdit'
import ChannelEdit from './components/ChannelEdit.vue'
const channelList=ref([])
const loading=ref(false)
const dialog=ref()
//
const getChannelList=async()=>{
	// 发请求之前加载loading
	loading.value=true
	const res=await artGetChannelsService()
	channelList.value=res.data.data
	// channelList.value=[]
	//发请求之后取消loading
	loading.value=false
	console.log(channelList.value);
}
getChannelList()

const onEditChannel=(row)=>{
	// console.log(row,$index);
	dialog.value.open(row)
}

const onDelChannel=async (row,$index)=>{
	//提示框弹出并且等待
	await ElMessageBox.confirm('你确认要删除该分类吗','温馨提示',{
		type:'warning',
		confirmButtonText:'确认',
		cancelButtonText:'取消'
	})
	
	await artDeleteChannelsService(row.id)
	ElMessage.success('删除成功')
	//更新数据页面
	getChannelList()
	// dialog.value.open(row)
}
//对于这个父组件调用组件中的方法打开弹窗

const onAddChannel=()=>{
	// dialogVisible.value=true
	// ChannelEdit.open()
	// 我尼玛怎么这样写呀
	dialog.value.open({})
}

const onSuccess=()=>{
	//重新调用获取list数据就可以更新
	getChannelList()
}
</script>


<template>
	<!-- title配置标题  因为组件里面用了{{title}} -->
	<page-container title="文章分类">
		<!-- 这里使用具名的插槽 -->
		<template #extra>
			<el-button @click="onAddChannel">添加分类</el-button>
		</template>
		<!-- 这里面就是slot默认插槽 -->
		<!-- 表格部分呈现 -->
		<!-- :data绑定list总体数据 -->
		<!-- <el-table :data="channelList" style="width: 100%;">
			<el-table-column label="序号"></el-table-column>
			<el-table-column label="分类名称" ></el-table-column>
			<el-table-column label="分类别名" ></el-table-column>
			<el-table-column label="操作"></el-table-column>
		</el-table> -->
		<el-table v-loading="loading" :data="channelList" style="width: 100%">
		  <el-table-column type="index" label="序号" width="100"></el-table-column>
		  <el-table-column prop="cate_name" label="分类名称"></el-table-column>
		  <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
		  <el-table-column label="操作" width="150">
		    <!-- row 就是 channelList 的一项， $index 下标 -->
		    <template #default="{row,$index}">
					<el-button :icon="Edit" @click="onEditChannel(row,$index)" circle type="primary" plain>
						
					</el-button>
					<el-button :icon="Delete" @click="onDelChannel(row,$index)" circle type="danger" plain>
						
					</el-button>
				</template>
				
				
		  </el-table-column>
			<!-- 如果为空数据就显示 -->
			<template #empty>
				<el-empty description="没有数据" />
			</template>
		  
		</el-table>
		
		<template>
		  <el-button plain @click="dialogVisible = true">
		    Click to open the Dialog
		  </el-button>
		
		  
		</template>
		<!-- 这是一个子组件用在这里  @名称 是子组件传递的对象过来  叫父亲更新视图-->
		<channel-edit ref="dialog" @success="onSuccess"></channel-edit>
	</page-container>
</template>

<style lang="scss" scoped></style>